<!--创建地图-->
<template>
  <div class="creat-step1">
    <div class="inner">
      <el-form label-position="left" :model="createForm" :rules="rules" ref="createForm" label-width="120px">
        <el-upload class="upload-demo" action :http-request="handleLogoFile" :limit="1" v-if="!createForm.logoPath">
          <div class="uploadText">上传酒吧Logo</div>
        </el-upload>
        <div class="logoWrap" v-if="createForm.logoPath">
          <img :src="createForm.logoPath" class="barLogo" />
          <img src="@/assets/image/delete_icon.png" class="deleteIcon" @click="handleRemoveImg" />
        </div>
        <el-form-item label="商家名称:" prop="barName" style="margin-bottom: 18px">
          <el-input v-model="createForm.barName" placeholder="请输入商家名称" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="商家地址:" prop="address" style="margin-bottom: 18px">
          <el-input v-model="createForm.address" placeholder="请输入地址" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="酒吧类型:" prop="type">
          <el-select v-model="createForm.type" placeholder="请选择">
            <el-option label="音乐酒吧" value="0"></el-option>
            <el-option label="Live House" value="1"></el-option>
            <el-option label="小清吧" value="2"></el-option>
            <el-option label="演艺会所" value="3"></el-option>
            <el-option label="嗨吧" value="4"></el-option>
            <el-option label="潮吧" value="5"></el-option>
            <el-option label="派对场" value="6"></el-option>
            <el-option label="演唱会/音乐节" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Wi-Fi密码:" prop="wifi" style="margin-bottom: 18px">
          <el-input v-model="createForm.wifi" placeholder="选填" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="酒吧通知:" prop="broadCt" style="margin-bottom: 18px">
          <el-input v-model="createForm.broadCt" placeholder="示例:今晚八点,在场所有女生均能获得免费果盘一份。" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="禁止自定义祝福:" style="margin-bottom: 18px">
          <el-switch
            v-model="createForm.forbid_chat"
            active-value="1"
            inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="字体颜色:" prop="broadCt" style="margin-bottom: 18px">
          <el-color-picker v-model="createForm.zfbFontColor"></el-color-picker>
        </el-form-item>
        <el-form-item>
          <my-button type="primary" @click.native="requestEditInfo('createForm')" height="29" width="67"> 修改 </my-button>
        </el-form-item>
        <div class="customItem">
          <el-button size="small" type="primary" @click="clearSignPeople">清空签到人</el-button>
          <el-button size="small" type="primary" @click="clearChatRecord">清空聊天记录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import MyButton from '@/components/my-button';
import messageMixin from '@/mixins/messageMixin';
import { getActivityInfo } from '@/api/app/live';
import request from '@/utils/request';
import { getActivity } from '@/api/setting/activitySetting/theme';
import { editActivityMsg } from '@/api/setting/activitySetting/activity';
import { removeUserData, removeChatRecord } from '@/api/setting/activityData/gameData';

export default {
  mixins: [messageMixin],
  name: 'create-step1',
  components: { MyButton },
  data() {
    return {
      tmpLiveId: '',
      tmpFile: '',
      createForm: {
        barName: '',
        logoPath: '',
        address: '',
        type: '0',
        wifi: '',
        broadCt: '',
        zfbFontColor: '',
        forbid_chat: '0',
      },
      // 输入验证
      rules: {
        barName: [{ required: true, message: '请输入商家名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入商家地址', trigger: 'blur' }],
        type: [{ required: true, message: '请选择酒吧类型', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getLiveInfo();
    // this.getActivityInfo();
  },
  mounted() {},
  methods: {
    handleLogoFile(e) {
      console.log(e);
      if (e.file.size > 21000000) {
        this.$message.error('上传图片不超过20M!');
        return;
      }
      if (!(e.file.type === 'image/jpeg' || e.file.type === 'image/png')) {
        this.$message.error('上传图片只能是jpg或png格式');
        return;
      }
      // 压缩一下文件
      const freader = new FileReader();
      freader.readAsDataURL(e.file); // 读取照片

      freader.onload = () => {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        const img = new Image();
        img.src = freader.result;
        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          context.clearRect(0, 0, img.width, img.height);
          context.drawImage(img, 0, 0, img.width, img.height);
          const result = canvas.toDataURL('image/png', 1);

          this.createForm.logoPath = result;
          // 转换成 file
          const arr = result.split(',');
          const bstr = atob(arr[1]);
          let n = bstr.length;
          const u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          const file = new File([u8arr], 'photo');

          console.log('上传的图片');
          console.log(file);
          this.tmpFile = file;
          // 调用图片上传接口
          this.uploadLogoFile();
        };
      };
    },
    // 走后台上传
    uploadLogoFile() {
      const formData = new FormData();
      formData.append('file', this.tmpFile);
      request.post('/beiJing/shangchuanTomcat', formData).then((res) => {
        console.log('上传主题图片的图片地址', res);
        this.createForm.logoPath = res.data.filePath;
      });
    },
    // 删除图片
    handleRemoveImg() {
      this.createForm.logoPath = '';
    },
    toSetting(pObj) {
      this.$store.commit('initLiveInfo', {
        ...pObj,
      });
      this.$router.push('/app/activity/activityInfo/themeSetting');
    },
    /* 获取活动信息 */
    getActivityInfo() {
      getActivity({ splid: this.tmpLiveId }).then((res) => {
        console.log(res);
        const info = res.data;
        this.createForm.barName = info.theme;
        this.createForm.address = info.hotel_name;
        this.createForm.wifi = info.wife_mima;
        this.createForm.broadCt = info.bar_notice;
        this.createForm.type = info.scenario;
        this.createForm.logoPath = info.bar_logo;
        this.createForm.forbid_chat = info.forbid_chat || '0';
      });
    },
    /* 修改信息请求 */
    requestEditInfo() {
      const data = {
        splid: this.tmpLiveId,
        theme: this.createForm.barName,
        hotel_name: this.createForm.address,
        sceneio: this.createForm.type,
        wife_mima: this.createForm.wifi,
        bar_notice: this.createForm.broadCt,
        bar_logo: this.createForm.logoPath,
        zfbFontColor: this.createForm.zfbFontColor,
        forbid_chat: this.createForm.forbid_chat,
      };
      editActivityMsg(data).then((res) => {
        console.log('提交修改', res);
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功',
          });
        }
      });
    },
    getLiveInfo() {
      this.dataList = [];
      getActivityInfo({
        showCount: 1,
        currentPage: 1,
        type: '2',
        request_from_page: 'createPage',
      })
        .then((res) => {
          console.log(res);
          this.tmpLiveId = res.data.liveList[0].id;
        })
        .then(() => {
          this.getActivityInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clearSignPeople() {
      removeUserData({
        splid: this.tmpLiveId,
      }).then((res) => {
        console.log(res);
        this.$message({
          type: 'success',
          message: '清除签到人成功!',
        });
      });
    },
    clearChatRecord() {
      removeChatRecord(this.tmpLiveId).then((res) => {
        console.log(res);
        this.$message({
          type: 'success',
          message: '清除聊天记录成功!',
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.creat-step1 {
  padding-top: 15px;
  display: flex;
  width: 100%;
  .inner {
    position: relative;
    margin: auto;
    width: 70%;
    max-width: 480px;
    .el-form::v-deep {
      .el-form-item__label {
        width: 240px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(24, 17, 17, 0.85);
      }
      .el-autocomplete {
        width: 100%;
      }
      //取消显示左侧必填星号
      // .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
      // .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
      //   content: '';
      //   color: #f56c6c;
      //   margin-right: 0;
      //   display: none;
      // }
    }
  }
}
.upload-demo::v-deep {
  width: 100%;
  font-size: 36px;
  color: #1890ff;
  margin-bottom: 19px;
  display: flex;
  justify-content: center;
  .uploadText {
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 3px;
      background-color: #1890ff;
      position: absolute;
      bottom: -3px;
    }
  }
}
.logoWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 19px;
  .barLogo {
    width: 120px;
    height: auto;
  }
  .deleteIcon {
    width: 22px;
    height: 22px;
    margin-left: 6px;
    cursor: pointer;
  }
}
.customItem {
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 0;
}
</style>
